<template>
    <div v-if="loaded">
        <div class="header-info">
            <p>订单:{{info.orderCode}}</p>
            <div>
                <el-button size="large" class="receive-btn" type="primary" @click="reset_pdf_click"
                           v-if="info.status == 'Created'">
                    重新生成Pdf
                </el-button>
                <el-button size="large" class="receive-btn" type="primary" @click="setAmount_click"
                           v-if="info.status == 'Created'">
                    修改优惠金额
                </el-button>

                <el-button size="large" class="receive-btn" type="primary" @click="setPayed"
                           v-if="info.status == 'Created'">
                    设置为已付款
                </el-button>
                <el-button size="large" class="receive-btn" type="primary" @click="changeStatusToPrepare"
                           v-if="info.status == 'Payed'">设置为备货
                </el-button>
                <el-button size="large" class="receive-btn" type="primary" @click="deliveryFormVisible = true"
                           v-if="info.status == 'Prepare' || info.status == 'Delivered' ">
                    设置物流信息
                </el-button>
            </div>
        </div>

        <div class="card-body">
            <el-card class="card2" header="订单信息">
                <kv label="状态：" class="important">
                    <div>
                        <el-tag type="primary">{{info.status_res}}</el-tag>
                    </div>
                </kv>
                <kv label="总金额："><span>{{info.amount_yuan | money}}</span></kv>
                <kv label="优惠金额："><span>{{ info.amount_discount_yuan | money}}</span></kv>
                <kv label="应付金额：" class="important">
                    <span> {{ (info.amount_yuan - info.amount_discount_yuan) | money}}</span>
                </kv>

                <kv label="下单时间："><span>{{info.createAt_res}}</span></kv>
                <kv label="PDF时间："><span>{{info.pdfCreateAt_res}}</span></kv>
                <kv label="下单人："><span>{{info.createBy.name}}</span></kv>
            </el-card>


            <el-card class="card2" header="收货人信息">
                <kv label="别名："><span>{{info.receiveAddress.alias}}</span></kv>
                <kv label="收货人："><span>{{info.receiveAddress.userName}}</span></kv>
                <kv label="地址："><span>{{info.receiveAddress.city.name}}{{info.receiveAddress.address}}</span></kv>
                <kv label="电话："><span>{{info.receiveAddress.mobile}}</span></kv>
            </el-card>

            <el-card class="card2">
                <div slot="header" class="clearfix">
                    <span>支付信息</span>
                    <!-- v-if="info.status !== 'Created' ||  'Over' ||  'Refunded'    -->
                    <!--v-if="info.status !== 'Created' || info.status !== 'Over' || info.status !== 'Refunded'-->
                    <el-button style="float: right;" size="mini" type="warning"
                               v-if="info.status !='Refunded' && info.status !='Created' " @click="refund_click">退款
                    </el-button>
                </div>
                <kv label="支付方式："><span>{{info.payInfo.payType_res}}</span></kv>
                <kv label="已付金额：" class="important"><span>{{info.payInfo.payAmount_yuan | money}}</span></kv>
                <kv label="付款时间："><span>{{info.payInfo.payAt_res}}</span></kv>
                <kv label="备注："><span>{{info.payInfo.remark}}</span></kv>
            </el-card>

            <el-table :data="info.details" border style="width: 60%;" class="card2">
                <el-table-column prop="album.name" label="产品名称" align="center"></el-table-column>
                <el-table-column prop="number" label="数量" align="center"></el-table-column>
                <el-table-column prop="price_yuan" label="单价" align="center"></el-table-column>
                <el-table-column prop="amount_yuan" label="总价" align="center">
                    <!-- <template slot-scope="scope">
                         <div>{{scope.row.amount || this.info.amount}}</div>
                     </template>-->

                </el-table-column>
            </el-table>

            <el-card class="card2" header="快递信息">
                <p class="card-info"><span
                        class="card-text">快递单号：</span><span>{{info.deliveryInfo.expressNumber}}</span>
                </p>
                <p class="card-info"><span
                        class="card-text">快递公司：</span><span>{{info.deliveryInfo.expressCorp.name}}</span>
                </p>
                <p class="card-info"><span class="card-text">发货时间：</span><span>{{info.deliveryInfo.sentAt_res}}</span>
                </p>
                <p class="card-info"><span
                        class="card-text">接收时间：</span><span>{{info.deliveryInfo.receiveAt_res}}</span></p>
            </el-card>
        </div>


        <!--弹出框-->

        <el-dialog title="物流信息" :visible.sync="deliveryFormVisible" :close-on-click-modal="false" :show-close="false"
                   width="50%" v-if="info.deliveryInfo">
            <div>
                <kv label="物流公司:" chk="*">
                    <selector v-model="info.deliveryInfo.expressCorp" url="/express/find" mode="radio"
                              fields="id,name"></selector>
                </kv>
                <kv label="物流单号：" chk="*">
                    <el-input v-model="info.deliveryInfo.expressNumber" placeholder="请输入物流单号"></el-input>
                </kv>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="deliveryFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="deliveryInfo()">确认发货</el-button>
            </div>
        </el-dialog>


        <el-dialog title="设置金额" :visible.sync="amountFormVisible" :close-on-click-modal="false" :show-close="false"
                   width="50%">
            <div>
                <kv label="总金额："><span>{{ amountInfo.amount_yuan | money}}</span></kv>
                <kv label="折扣：">
                    <el-input v-model="amountInfo.amount_discount_yuan"></el-input>
                </kv>
                <kv label="应付金额：" class="important"><span> {{ (amountInfo.amount_yuan - amountInfo.amount_discount_yuan)  | money}}</span>
                </kv>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="amountFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="setAmount_ok_click()">设置金额</el-button>
            </div>
        </el-dialog>


        <el-dialog title="退款操作" :visible.sync="refundFormVisible" :close-on-click-modal="false" :show-close="false"
                   width="50%">
            <div>
                <kv label="总金额："><span>{{ info.payInfo.payAmount_yuan | money}}</span></kv>
                <kv label="退款金额：">
                    <el-input v-model="refundInfo.refund_amount_yuan"></el-input>
                </kv>
                <kv label="退款备注：">
                    <el-input v-model="refundInfo.remark"></el-input>
                </kv>
                <kv label="剩余金额：" class="important"><span> {{ (info.payInfo.payAmount_yuan - refundInfo.refund_amount_yuan)  | money}}</span>
                </kv>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="refundFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="refund_ok_click()">确定退款</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script type="text/javascript">
    export default {
        name: "order-detail",
        props: {},
        computed: {},
        data() {
            return {
                deliveryFormVisible: false,
                amountFormVisible: false,
                refundFormVisible: false,
                info: {}, //返回的数据
                amountInfo: {},
                refundInfo: {},
                // expressList: [],
                loaded: false
            }
        },
        filters: {
            money(value) {
                return '￥' + (value ? value.ToRound(2) : 0);
            }
        },
        mounted() {
            this.getGoods().then(() => {
                this.loaded = true;
            })
        },
        methods: {
            getGoods() {
                let param = {orderCode: this.$route.query.orderCode};
                if (!param.orderCode) {
                    jv.error("找不到OrderCode,参数非法");
                    return;
                }
                return this.$http.post('/order/findByOrderCode', param).then((res) => {

                    let json = res.data.data;

                    json.details.forEach((item) => {
                        //item.hasCover_res = item.hasCover ? "是" : "否";
                        item.price_yuan = (item.price / 100).ToRound();
                        item.amount_yuan = (item.price * item.number / 100).ToRound();
                    });

                    jv.OrderStatusEnum.fillRes(json, "status");
                    jv.PayTypeEnum.fillRes(json.payInfo, "payType");

                    json.payInfo.payAmount_yuan = (json.payInfo.payAmount / 100).ToRound();

                    json.amount_yuan = (json.amount / 100).ToRound();
                    json.amount_discount_yuan = (json.amount_discount / 100).ToRound();

                    // this.deliveryForm = {express: json.express, expressNumber: json.expressNumber};
                    this.info = json;

                    this.$emit("loaded", this.info);
                })
            },

            CheckQualificationClick(e) {
                window.open(e.target.src);
            },
            setPayed() {
                this.$http.post('/order/setStatus', {
                    orderCode: this.info.orderCode,
                    status: "Payed"
                }).then(res => {
                    this.getGoods();
                    this.$message.info('该订单状态已修改为已付款');
                })
            },
            setAmount_click() {
                this.amountFormVisible = true;
                this.amountInfo = {
                    amount_yuan: this.info.amount_yuan,
                    amount_discount_yuan: this.info.amount_discount_yuan
                };
            },
            reset_pdf_click() {
                this.$http.post("/order/reset-pdf", {orderCode: this.info.orderCode}).then(res => {
                    this.getGoods();
                    this.$message.info('已设置服务重新生成Pdf，时间大约1分钟。');
                })
            },
            setAmount_ok_click() {
                this.amountFormVisible = false;
                var amount_discount_yuan = Number(this.amountInfo.amount_discount_yuan);
                this.$http.post("/order/set-amount-discount",
                    {
                        orderCode: this.info.orderCode,
                        amountDiscount: amount_discount_yuan * 100
                    }
                ).then(res => {
                    this.info.amount_discount = amount_discount_yuan * 100;
                    this.info.amount_discount_yuan = amount_discount_yuan;
                });
            },
            //修改状态为备货状态
            changeStatusToPrepare() {
                this.$http.post('/order/setStatus', {
                    orderCode: this.info.orderCode,
                    status: "Prepare"
                }).then(res => {
                    this.amountFormVisible = true;
                    this.getGoods();
                    this.$message({
                        message: '该订单状态已修改为备货',
                        type: 'success'
                    });
                })

            },
            //退款
            refund_click() {
                this.refundFormVisible = true;
                this.refundInfo = {
                    refund_amount_yuan: this.info.payInfo.payAmount_yuan,
                    remark: "客户原因退款"
                }
            },
            refund_ok_click() {

                let param = {
                    orderCode: this.info.orderCode,
                    remark: this.refundInfo.remark,
                    amount: this.refundInfo.refund_amount_yuan * 100
                }

                this.$http.post('/order/refund', param).then(res => {

                    this.refundFormVisible = false;
                    this.getGoods();
                    this.$message({
                        message: '该订单已退款',
                        type: 'success'
                    });
                })

            },
            //确认发货(物流信息)
            deliveryInfo() {

                let para = {
                    expressNumber: this.info.deliveryInfo.expressNumber,
                    expressCorp: this.info.deliveryInfo.expressCorp,
                    orderCode: this.info.orderCode
                };

                this.$http.post('/express/send', para).then(res => {
                    this.deliveryFormVisible = false;
                    this.getGoods();
                    this.$message({
                        message: '物流信息修改成功',
                        type: 'success'
                    });
                })
            },
        }
    }
</script>

<style scoped>
    .order-detail {
        margin: 20px 0;
    }

    .order-number {
        padding: 10px;
        font-size: 16px;
    }

    .order-number span.padding {
        padding-right: 30px;
    }

    .detailBox {
        width: 48%;
        float: left;
    }

    .marginR20 {
        margin-right: 20px;
    }

    .marginT40 {
        margin-top: 40px;
    }

    .detailBox .card-info {
        padding: 5px 0;
        font-size: 14px;
    }

    .detailBox .card-info .card-text {
        display: inline-block;
        width: 70px;
        text-align: right;
    }

    .card-body {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .card2 {
        width: 30%;
        min-width: 240px;
        display: flex;
        flex-direction: column;
        margin: 10px;
    }

    .card2 >>> .el-card__body {
        display: flex;
        flex-direction: column;
    }

</style>
